<script lang="ts" setup>
  import { ref } from 'vue';
  import Message from '@sscd/message';
  import Button from '@sscd/button';
  import Steps from '@sscd/steps';
  const current = ref<number>(0);
  const next = () => current.value++;
  const prev = () => current.value--;
  const steps = [
    { title: 'First', content: 'First-content' },
    { title: 'Second', content: 'Second-content' },
    { title: 'Last', content: 'Last-content' },
  ];
</script>

<template>
  <div class="demo">
    <div class="demo-title">步骤切换</div>
    <div class="demo-content">
      <Steps :current="current">
        <Steps.Step v-for="item in steps" :key="item.title" :title="item.title" />
      </Steps>
      <div class="steps-content">
        {{ steps[current].content }}
      </div>
      <div class="steps-action">
        <Button v-if="current < steps.length - 1" type="primary" @click="next">Next</Button>
        <Button
          v-if="current == steps.length - 1"
          type="primary"
          @click="Message.success('Processing complete!')"
        >
          Done
        </Button>
        <Button v-if="current > 0" style="margin-left: 8px" @click="prev">Previous</Button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
  }
  .steps-action {
    margin-top: 24px;
  }
  [data-theme='dark'] .steps-content {
    background-color: #2f2f2f;
    border: 1px dashed #404040;
  }
</style>
